---
type: tutorial
title: Crea tu primer proyecto en Astro
i18nReady: true
description: |-
  Tutorial: Crea tu primer blog con Astro —
  Crea un nuevo proyecto para el tutorial de Astro y prepárate para codificar
---
import Badge from '~/components/Badge.astro';
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

<PreCheck>
  - Ejecutar el asistente de configuración `create astro` para crear un nuevo proyecto Astro
  - Iniciar el servidor Astro en modo de desarrollo (dev)
  - Ver una vista previa en directo de tu sitio web en tu navegador
</PreCheck>

## Inicia el asistente de configuración de Astro

La forma preferida de crear un nuevo sitio Astro es a través de nuestro asistente de configuración `create astro`.

<Steps>
1. En la línea de comandos de tu terminal, ejecuta el siguiente comando utilizando tu gestor de paquetes preferido:

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      # crear un nuevo proyecto con npm
      npm create astro@latest
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      # crear un nuevo proyecto con pnpm
      pnpm create astro@latest
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      # crear un nuevo proyecto con yarn
      yarn create astro
      ```
      </Fragment>
    </PackageManagerTabs>

2. Confirma `y` para instalar `create-astro`.
3. Cuando la instrucción te pregunte "Where would you like to create your new project?", escribe el nombre de una carpeta para crear un nuevo directorio para tu proyecto, por ejemplo `./tutorial`

    :::note
    Un nuevo proyecto de Astro sólo puede crearse en una carpeta completamente vacía, así que elige un nombre para tu carpeta que no exista.
    :::

4. Verás una pequeña lista de plantillas de inicio entre las que puedes elegir. Utiliza las teclas de flecha (arriba y abajo) para navegar hasta la plantilla "Empty" y luego presiona la tecla de retorno (Enter) para enviar tu elección. 

5. Cuando la instrucción te pregunte si planeas escribir TypeScript, escribe `n`. 

6. Cuando aparezca la pregunta "Would you like to install dependencies?", escribe `y`.

7. Cuando la instrucción te pregunte: "Would you like to initialize a new git repository?", escribe `y`.
</Steps>

Cuando finalice el asistente de instalación, ya no necesitarás esta terminal. Ahora puedes abrir VS Code para continuar.

## Abre tu proyecto en VS Code

<Steps>
8. Abre VS Code. Se te pedirá que abra una carpeta. Elige la carpeta que creaste durante el asistente de instalación.

9. Si es la primera vez que abres un proyecto de Astro, deberías ver una notificación preguntándote si deseas instalar las extensiones recomendadas. Haz clic para ver las extensiones recomendadas y elige [Astro language support extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). Esto proporcionará resaltado de sintaxis y autocompletado para tu código  Astro.

10. Asegúrate de que el terminal esté visible y que puedas ver el símbolo del sistema, por ejemplo:

    ```sh
    user@machine:~/tutorial$
    ```

    :::tip[Atajo de teclado]
    Para cambiar la visibilidad del terminal, utiliza <kbd>Ctrl + J</kbd> (macOS: <kbd>Cmd ⌘ + J</kbd>).
    :::
</Steps>

Ahora puedes utilizar el terminal integrada en esta ventana, en lugar de la aplicación Terminal de tu ordenador, para el resto de este tutorial.



## Ejecuta Astro en modo desarrollo

Para poder previsualizar los archivos de tu proyecto _como un sitio web_ mientras trabajas, necesitarás que Astro se ejecute en modo desarrollo (dev).

### Inicia el servidor de desarrollo

<Steps>
11. Ejecuta el comando para iniciar el servidor Astro dev escribiendo en el terminal de VS Code:

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm run dev
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm run dev
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn run dev
      ```
      </Fragment>
    </PackageManagerTabs>

    Ahora deberías ver la confirmación en el terminal que Astro está siendo ejecutando en modo dev. 🚀
</Steps>

## Visualiza una vista previa de tu sitio web

Tus archivos de proyecto contienen todo el código necesario para mostrar un sitio web de Astro, pero el navegador es el responsable de mostrar tu código como páginas web.

<Steps>
12. Haz clic en el enlace `localhost` en la terminal para ver una vista previa en directo de tu nuevo sitio web de Astro. 

    (Astro utiliza `http://localhost:4321` por defecto si el puerto `4321` está disponible).

    Este es el aspecto que debería tener el sitio web de inicio del "Proyecto vacío" de Astro en la vista previa del navegador:

    ![Una página en blanco con la palabra Astro en la parte superior.](/tutorial/minimal.png)

</Steps>

:::tip[Usando el servidor de desarrollo Astro]

Mientras el servidor de Astro esté funcionando en modo de desarrollo, NO podrás ejecutar comandos en esa terminal. En su lugar, este panel te dará comentarios mientras previsualizas tu sitio.

Puedes detener el servidor de desarrollo en cualquier momento y volver al símbolo del sistema escribiendo <kbd>Ctrl + C</kbd> en el terminal.

A veces el servidor de desarrollo se detendrá por sí mismo mientras estás trabajando. Si la vista previa en vivo deja de funcionar, vuelve a la terminal y reinicia el servidor de desarrollo escribiendo `npm run dev`.
:::

<Box icon="check-list">
## Checklist

<Checklist>
- [ ] Puedo crear un nuevo proyecto Astro.
- [ ] Puedo iniciar el servidor de desarrollo Astro.
</Checklist>
</Box>

### Recursos

- <p>[Introducción a Visual Studio Code](https://code.visualstudio.com/docs/introvideos/basics) <Badge>externo</Badge> — un video tutorial para instalar, configurar y trabajar con VS Code</p>
